<template>
  <view>
    <!-- 1 搜索框 -->
    <UgoSearch></UgoSearch>

    <!-- 2 tabs -->
    <u-tabs
      active-color="#eb4450"
      :bar-width="180"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    ></u-tabs>

    <!-- 3 tabs内容 条件渲染 -->
    <view class="tab-content">
      <view v-for="(item, index) in list" :key="item.name" class="tabs-item">
        <block v-if="current === index">
          <navigator
            v-for="item1 in goodsList"
            :key="item1.goods_id"
            class="goods-item"
            :url="'/pages/goods_detail/goods_detail?goods_id=' + item1.goods_id"
          >
            <view class="left">
              <u-image
                width="191rpx"
                height="191rpx"
                :src="item1.goods_small_logo"
              ></u-image>
            </view>
            <view class="right">
              <view class="goods-name">{{ item1.goods_name }}</view>
              <view class="goods-price">￥{{ item1.goods_price }}</view>
            </view>
          </navigator>
        </block>
      </view>
      <u-loadmore :status="status" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      status: "loadmore",
      // 商品列表
      goodsList: [],
    };
  },
  onLoad({ cid }) {
    // 定义全局变量  存放接口参数
    this.params = {
      // 否	string	关键字
      query: "",
      // 否	string	分类id
      cid: cid || 6,
      // 否	number	页码
      pagenum: 1,
      // 否	number	页容量
      pagesize: 10,
    };
    // 定义 总条数
    this.total = 0;

    // 获取商品列表
    this.getGoodsList();
  },
  // 滚动条触底事件   上拉加载下一页事件
  onReachBottom() {
    // 拿到 已经加载过的数组长度
    if (this.goodsList.length >= this.total) {
      this.status = "nomore";
    } else {
      this.status = "loading";
      this.params.pagenum++;
      this.getGoodsList();
    }
  },
  async onPullDownRefresh() {
    this.goodsList = [];
    this.params.pagenum = 1;
    await this.getGoodsList();
    wx.stopPullDownRefresh();
  },
  methods: {
    change(index) {
      this.current = index;
    },

    // 获取商品列表数据
    async getGoodsList() {
      const res = await this.$u.get("/goods/search", this.params);
      console.log(res);
      this.goodsList = [...this.goodsList, ...res.goods];
      this.total = res.total;
    },
  },
};
</script>

<style lang="scss">
.goods-item {
  display: flex;
  margin: 10rpx 0;
  padding: 20rpx 0;
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
    u-image {
    }
  }
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
      color: #666;
      font-size: 26rpx;
    }

    .goods-price {
      color: $themeColor;
    }
  }
}
</style>